import React, { Component } from 'react'

export default class FormCom extends Component {
  //声明 login 方法
  login = (e) => {
    //阻止默认行为
    e.preventDefault();
    //获取每个元素的输入值
    let username = this.userNode.value;
    let password = this.passNode.value;
    //输出
    console.log(`用户名为: ${username} 密码为: ${password}`)
  }

  reset = () => {
    this.userNode.value = ''
    this.passNode.value = ''
  }

  render() {
    return (
      <div>
        <h2>登录</h2>
        <hr />
        <form action="">
          用户名: <input type="text" name='username' ref={el => this.userNode = el} /><br></br>
          密码: <input type="password" name='password' ref={el => this.passNode = el} /><br />
          <hr />
          <button onClick={this.login}>登录</button>
          <button type="button" onClick={this.reset}>重置</button>
        </form>
      </div>
    )
  }
}
